<template>
  <div>
    <a-page-header
      title="菜单管理"
      :ghost="false"
      sub-title="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景"
    />

    <a-card class="mt-1" size="small">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        :loading="loading"
        :bordered="true"
        size="middle"
        rowKey="id"
      >
        <template #icon="{ record }">
          <icon v-if="record.icon != undefined" :name="record.icon" />
        </template>

        <template #action="{ record }">
          <a-button type="link" @click="update(record)">
            <icon name="EditOutlined" />
          </a-button>
        </template>
      </a-table>
    </a-card>

    <a-modal
      title="编辑"
      v-model:visible="modal.visible"
      :confirm-loading="modal.confirmLoading"
      @ok="handleSubmit"
    >
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="父级" v-bind="validateInfos.parent_id">
          <a-tree-select
            v-model:value="form.parent_id"
            tree-data-simple-mode
            style="width: 100%"
            :tree-data="treeData"
            :replace-fields="{
              children: 'children',
              title: 'title',
              key: 'id',
              value: 'id',
            }"
            placeholder="父级菜单"
          />
        </a-form-item>
        <a-form-item label="菜单名称" v-bind="validateInfos.title">
          <a-input v-model:value="form.title" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, reactive, Ref, ref } from 'vue';
import {
  Card,
  Table,
  Modal,
  Button,
  Form,
  Input,
  PageHeader,
  TreeSelect,
  message,
} from 'ant-design-vue';
import { useForm } from '@ant-design-vue/use';

import { getMenus, updateMenu } from '@/api/menu';
import { Icon } from '@/components';
import { Menu } from '@/types';
import { ListToTree } from '@/util';
const columns = [
  {
    title: '名称',
    dataIndex: 'title',
  },
  {
    title: '路由',
    width: '300px',
    dataIndex: 'route',
  },
  {
    title: '图标',
    width: '80px',
    dataIndex: 'icon',
    align: 'center',
    slots: { customRender: 'icon' },
  },
  {
    title: '操作',
    width: '80px',
    align: 'center',
    slots: { customRender: 'action' },
  },
];

export default defineComponent({
  components: {
    ACard: Card,
    ATable: Table,
    AModal: Modal,
    APageHeader: PageHeader,
    AButton: Button,
    AForm: Form,
    AFormItem: Form.Item,
    AInput: Input,
    ATreeSelect: TreeSelect,
    Icon,
  },
  setup() {
    const loading = ref(true);
    const data: Ref<Menu[]> = ref([]);
    const treeData: Ref<Menu[]> = ref([
      { id: 0, title: '顶级菜单', parent_id: 0, icon: '', route: '' },
    ]);
    const modal = reactive({
      visible: false,
      confirmLoading: false,
    });

    const form = reactive({
      title: '',
      icon: '',
      route: '',
      parent_id: 0,
    });

    onMounted(async () => {
      const response = await getMenus();
      if (response != undefined && response.status == 200) {
        let items: Menu[] = [];
        ListToTree(response.data, items);
        data.value = items;
        treeData.value = treeData.value.concat(items);
      }
      loading.value = false;
    });

    const update = (record: Menu) => {
      modal.visible = true;
      Object.assign(form, record);
    };

    const rulesRef = reactive({
      title: [{ required: true, message: '菜单名称不能为空' }],
    });
    const { validate, validateInfos } = useForm(form, rulesRef);

    const reload = <() => {}>inject('reload');
    const handleSubmit = async () => {
      try {
        await validate();
      } catch (e) {
        return;
      }

      modal.confirmLoading = true;
      const res = await updateMenu(form);
      if (res != undefined && res.status == 200) {
        message.success(res.message);
      } else {
        message.error(res != undefined ? res.message : '更新失败！');
      }
      modal.visible = false;
      modal.confirmLoading = false;
      reload();
    };

    return {
      data,
      columns,
      loading,
      update,
      modal,
      handleSubmit,
      validateInfos,
      form,
      treeData,
    };
  },
});
</script>

<style lang="less" scoped>
</style>
